<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<title></title>
<script>
	function say(key){
		speak(String.fromCharCode(key))
		//alert(String.fromCharCode(key))
	}
	function ack(){
		let arr = [];
		for(let i=0;i<26;i++){
			arr.push("<div style='cursor' onclick='say("+(65+i)+")'>"+String.fromCharCode(65+i)+String.fromCharCode(97+i)+"</div>")
		  
		}
		
			document.getElementsByClassName("cards")[1].innerHTML=(arr.join(""));
	}
	function speak(sentence) {
		let work = sentence;
		work  =work+" "+work+" "+ work.split("").join(" ")+" "+ work;
	    let utterance = new SpeechSynthesisUtterance()
		utterance.text=work;
		
	   utterance.volume =100;
		window.speechSynthesis.speak(utterance)
	}
	 
	
   
</script>
	</head>
	<body>
		<div style="width: 100%;display: flex;align-items: flex-end;">
			<div style="width:13px;height:50px;background:red;">666</div>
			<div style="width:13px;height:60px;background:red;">777</div>
		</div>
		<div class="cards">
			
			<div style="width:auto;background: red;" onclick="speak('red')">red</div>
			<div style="width:auto;background: blue;" onclick="speak('blue')">blue</div>
			<div style="width:auto;background: yellow;color:black" onclick="speak('yellow')">yellow</div>
			<div style="width:auto;background: green;" onclick="speak('green')">green</div>
			
		<div style="width:auto;background: pink;" onclick="speak('pink')">Pink</div>
		<div style="width:auto;background:purple;" onclick="speak('Purple')">Purple</div>
		<div style="width:auto;background-color: black;" onclick="speak('black')">Black</div>
		<div style="width:auto;background-color: white;color:black" onclick="speak('white')">white</div>
		
		<div style="width:auto;background: orange;" onclick="speak('orange')">Orange</div>
		<div style="width:auto;background: orange;" onclick="speak('stand up')">Stand UP</div>
		<div style="width:auto;background: orange;" onclick="speak('sit down')">Sit Down</div>
		
		</div>
		<div class="cards">
		<div onclick="ack()"  style="opacity: 0.1;">OK</div>
		
		</div>
		
		
	</body>
</html>

<style>
	.cards{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.cards div{
		margin-right:20px;
		box-shadow: 1px 2px 5px #000000;
	  cursor: pointer;
		margin-top:10px;
		width:80px;
		height:100px;
		background: purple;
		border-radius: 5px;
		color:white;
		font-size:50px;
		display: block;
		text-align: center;
	    line-height: 100px;
	}
</style>

